<template>
  <div class="market">
    <div class="market_header">
      <top-bar :barObj="barObj"/>
    </div>
    <div class="content">
      <div class="arrow-up"></div>
      <div class="title">
        <span>货 币</span>
        <span>最新价/流通市值</span>
        <span>涨跌幅</span>
      </div>
      <ul class="list">
        <li v-for="(li,index) in priceList" :key="index">
          <span class="item">
            <img v-if="li.value1=='PS'" src="../../assets/img/PS.png" alt>
            <img v-else :src="li.value3" alt>
            {{li.value1}}
          </span>
          <span class="item">{{li.value2}}</span>
          <span class="item">
            <span
              class="item-btn"
              :class="li.value4>0?'item-rise':'item-decline'"
            >{{parseFloat(li.value4).toFixed(2)}}%</span>
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import topBar from "@/components/topBar";
import { gethqPriceList } from "../../api";
export default {
  name: "market",
  data() {
    return {
      barObj: {
        isBack: true,
        backVal: "我",
        title: "每日行情",
        isIcon: true
      },
      arr: [
        {
          img: require("../../assets/img/PS.png"),
          name: "PS",
          a: "52.5",
          b: 5.2
        },
        {
          img: require("../../assets/img/MIOTA.png"),
          name: "MIA",
          a: "52.5",
          b: -5.2
        },
        {
          img: require("../../assets/img/EOS.png"),
          name: "EOS",
          a: "52.5",
          b: 15.2
        },
        {
          img: require("../../assets/img/LTC.png"),
          name: "LTC",
          a: "52.5",
          b: -0.2
        }
      ],
      priceList: []
    };
  },
  components: {
    topBar
  },
  mounted() {
    this.gethqPrice();
  },
  methods: {
    gethqPrice() {
      gethqPriceList().then(res => {
        if (res.data && res.data.Success) {
          this.priceList = res.data.EntityList;
        }
      });
    }
  }
};
</script>
<style lang="stylus" scoped>
.market {
  .market_header {
    padding-top: 0.54rem;
    box-sizing: border-box;
    height: 1.96rem;
    background: linear-gradient(90deg, rgba(0, 174, 255, 1), rgba(0, 180, 255, 1), rgba(0, 120, 255, 1));
  }

  .content {
    width: 7.1rem;
    background: #fff;
    margin: 0 auto;
    position: relative;
    top: -25px;
    border-radius: 0.2rem;

    .arrow-up {
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 8px solid #fff;
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateX(-50%);
    }

    .title {
      display: flex;
      text-align: center;
      line-height: 1rem;

      span {
        flex-grow: 1;
        font-size: 14px;
        color: #007AFF;
      }
    }

    .list {
      width: 6.67rem;
      height: 10rem;
      margin: 0 auto;
      overflow: scroll;
      padding-bottom: 20px;

      li {
        display: flex;
        text-align: center;
        line-height: 1rem;
        border-bottom: 1px solid #E6E6E6;
        margin-bottom: 10px;
        padding-bottom: 10px;

        .item {
          flex-grow: 1;
          font-size: 16px;

          img {
            width: 0.9rem;
            height: 0.9rem;
          }
        }

        .item:nth-child(1) {
          float: left;
        }

        .item:nth-child(2) {
          flex: 0 1 3.1rem;
          // text-align: left;
        }

        .item:nth-child(3) {
          float: right;
        }

        .item-btn {
          min-width: 1rem;
          display: inline-block;
          line-height: 0.43rem;
          border-radius: 0.187rem;
          padding: 0px 8px;
          color: #FFF;
          font-size: 12px;
        }

        .item-rise {
          background: linear-gradient(-90deg, rgba(117, 204, 59, 1), rgba(55, 161, 23, 1), rgba(75, 182, 22, 1), rgba(122, 214, 48, 1));
        }

        .item-decline {
          background: linear-gradient(-90deg, rgba(235, 93, 42, 1), rgba(216, 56, 56, 1), rgba(255, 105, 105, 1));
        }
      }

      li:last-child {
        border: none;
      }
    }
  }
}
</style>

